<template>
  <main class="screen-view">
    大屏页面
    <div class="top-title"></div>
    <div class="left-top">
      <pie-charts :pieDatas="pieDatas"></pie-charts>
      <!-- <button @click="updatePieDatas">刷新</button> -->
    </div>
    <div class="left-bottom">
      <line-charts :lineDatas="lineDatas"></line-charts>
    </div>
    <div class="center-top">
      <center-svg></center-svg>
    </div>
    <div class="center-bottom">
      <bottom-panel :panelItems="panelItems"></bottom-panel>
    </div>
    <div class="right-top">
      <right-top-panel :percentage="percentage" :panelItems="top4Data"></right-top-panel>
    </div>
    <div class="right-center">
      <bar-charts :barDatas="barDatas"></bar-charts>
    </div>
    <div class="right-bottom">
      <circle-path-svg :monitoringData="monitoringData"></circle-path-svg>
    </div>
  </main>
</template>

<script setup lang="ts">
import BarCharts from '@/components/BarCharts.vue';
import BottomPanel from '@/components/BottomPanel.vue';
import CenterSvg from '@/components/CenterSvg.vue';
import CirclePathSvg from '@/components/CirclePathSvg.vue';
import LineCharts from '@/components/LineCharts.vue';
import PieCharts from '@/components/PieCharts.vue';
import RightTopPanel from '@/components/RightTopPanel.vue';
import { ref } from 'vue';
import { getPowerScreenData } from '../services/index';
import { chargingStatisticsData, dataAnalysisData, dataAnalysisData2, exceptionMonitoringData, lineData, pieData, pieData2 } from './config/chartData';
const pieDatas = ref(pieData)
const lineDatas = ref(lineData)
const barDatas = ref(chargingStatisticsData)
// 异常监控
const monitoringData = ref(exceptionMonitoringData)
const panelItems = ref(dataAnalysisData)
const top4Data = ref([])
const percentage = ref(0)

// 接口请求数据
getPowerScreenData().then((res: any) => {
  pieDatas.value = res.data.chargingPile.data
  lineDatas.value = res.data.processMonitoring.data
  barDatas.value = res.data.chargingStatistics.data
  monitoringData.value = res.data.exceptionMonitoring.data
  panelItems.value = res.data.dataAnalysis.data
  top4Data.value = res.data.chargingTop4.data
  percentage.value = res.data.chargingTop4.totalPercentage
})

// 定义更新方法
function updatePieDatas() {
  // 重新赋值整个引用以确保响应式更新
  pieDatas.value = pieData2;
}
</script>
<style scoped>
.screen-view {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #070a3c;
}

.top-title {
  width: 100%;
  height: 56px;
  position: absolute;
  top: 21px;
  background: url(@/assets/images/bg_header.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.left-top {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 536px;
  height: 443px;
  background: url(@/assets/images/bg_left-top.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.left-bottom {
  position: absolute;
  bottom: 49px;
  left: 16px;
  width: 536px;
  height: 443px;
  background: url(../assets/images/bg_left_bottom.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.center-top {
  position: absolute;
  right: 540px;
  bottom: 272px;
  width: 823px;
  height: 710px;

  /* background-color: pink; */
  background-repeat: no-repeat;
  background-size: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.center-bottom {
  position: absolute;
  right: 540px;
  bottom: 49px;
  width: 823px;
  height: 209px;
  background: url(../assets/images/bg_bottom.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.right-top {
  position: absolute;
  top: 96px;
  right: 17px;
  width: 519px;
  height: 327px;
  background: url(../assets/images/bg_right_top.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.right-center {
  position: absolute;
  top: 443px;
  right: 17px;
  width: 519px;
  height: 327px;
  background: url(../assets/images/bg_right_center.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.right-bottom {
  position: absolute;
  bottom: 49px;
  right: 17px;
  width: 519px;
  height: 242px;
  background: url(../assets/images/bg_right_bottom.svg);
  background-repeat: no-repeat;
  background-size: 100%;

  /* 使得svg图片水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
